<!--可提成订单模板 -->
<template>
  <div class="main section clearfix">
    <el-form
      :model="query"
      ref="query"
      label-width="120px"
      class="query query_wrap clearfix"
    >
      <el-form-item label="关键词:" prop="keyWord">
        <el-input v-model="query.keyWord" style="width: 210px"></el-input>
      </el-form-item>
      <div class="ts_wrap">
        <el-form-item label="带单量:" prop="beginValidNum" class="min">
          <p class="boxWrap">
            <el-input v-model="query.beginValidNum"></el-input>
          </p>
        </el-form-item>
        <span class="span">至</span>
        <el-form-item class="min" prop="endValidNum" label-width="0">
          <el-input v-model="query.endValidNum"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="最近登录:" prop="closeTime">
        <el-date-picker
          v-model="closeTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="所属公司:" prop="firmId">
        <el-select
          v-model="query.firmId"
          placeholder="请选择"
          @change="companyChange"
          style="width: 210px"
        >
          <el-option
            v-for="item in companyData"
            :key="item.id"
            :label="item.companyName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门:" prop="deptId">
        <treeselect
          :options="deptData"
          :clearable="false"
          v-model="query.deptId"
          :normalizer="normalizer"
          @select="handleNodeClick"
          placeholder="请选择部门"
          noOptionsText="请先选择所属公司"
        />
      </el-form-item>

      <el-form-item label="加入时间:" prop="grantTime">
        <el-date-picker
          v-model="grantTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="button">
        <el-button type="danger" @click="emptyFun">清空</el-button>
        <el-button type="primary" @click="print">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="box">
      <p class="button">
        <el-button
          @click="exportDept"
          type="primary"
          size="small"
          v-if="userInfoExport"
        >
          +导出</el-button
        >
      </p>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="agentNumber"
        :show-overflow-tooltip="true"
        align="center"
        label="经纪人手机号"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        :show-overflow-tooltip="true"
        align="center"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="idCard"
        :show-overflow-tooltip="true"
        align="center"
        label="身份证号"
      >
      </el-table-column>
      <el-table-column
        prop="email"
        :show-overflow-tooltip="true"
        align="center"
        label="邮箱"
      >
      </el-table-column>
      <el-table-column
        prop="type"
        :show-overflow-tooltip="true"
        align="center"
        label="类型"
      >
      </el-table-column>
      <el-table-column
        prop="firmName"
        :show-overflow-tooltip="true"
        align="center"
        label="所属公司"
      >
      </el-table-column>
      <el-table-column
        prop="deptName"
        :show-overflow-tooltip="true"
        align="center"
        label="所属部门"
      >
      </el-table-column>
      <el-table-column
        prop="joinTime"
        :show-overflow-tooltip="true"
        align="center"
        label="加入时间"
      >
      </el-table-column>
      <el-table-column
        prop="validNum"
        :show-overflow-tooltip="true"
        align="center"
        label="有效带单量"
      >
      </el-table-column>
      <el-table-column
        prop="validIncome"
        :show-overflow-tooltip="true"
        align="center"
        label="有效收入"
      >
      </el-table-column>
      <el-table-column
        prop="grantIncome"
        :show-overflow-tooltip="true"
        align="center"
        label="已交付收入"
      >
      </el-table-column>
      <el-table-column
        prop="unissuedIncome"
        :show-overflow-tooltip="true"
        align="center"
        label="未释放收入"
      >
      </el-table-column>
      <el-table-column
        prop="loginTime"
        :show-overflow-tooltip="true"
        align="center"
        label="最近登录"
      >
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button
            slot="reference"
            type="text"
            size="small"
            @click="look(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        :page-size="query.pagesize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 详情对话框 -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="60%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="160px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="经纪人手机号:">
              <span>{{ showData.agentNumber || "暂无数据" }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名:"
              ><span>{{ showData.name || "暂无数据" }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号:"
              ><span>{{ showData.idCard || "暂无数据" }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱:"
              ><span>{{ showData.email || "暂无数据" }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型:"
              ><span>{{ showData.type || "暂无数据" }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属公司:"
              ><span>{{ showData.firmName || "暂无数据" }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属部门:"
              ><span>{{ showData.deptName || "暂无数据" }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="加入时间:"
              ><span>{{ showData.joinTime || "暂无数据" }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="有效带单量:"
              ><span>{{ showData.validNum || "暂无数据" }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="有效收入:"
              ><span>{{
                showData.validIncome || "暂无数据"
              }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="已交付收入:"
              ><span>{{
                showData.grantIncome || "暂无数据"
              }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="未释放收入:"
              ><span>{{
                showData.unissuedIncome || "暂无数据"
              }}</span></el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="最近登录:"
              ><span>{{ showData.loginTime || "暂无数据" }}</span></el-form-item
            >
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  pagelist,
  getDepartment,
  postCompanyEmployList,
  getEmployee,
  getAgentAchievement,
  delAgentAchievement,
} from "../../../src/assets/js/api";
import { expotOut } from "../../assets/js/utlis";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "Invitation",
  components: { Treeselect },
  data() {
    return {
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
      },
      dialogVisible: false,
      exportInUrl: "",
      golbalPermissions: [],
      query: {
        keyWord: null,
        beginValidNum: null,
        endValidNum: null,
        deptId: null,
        firmId: null,
        beginLoginTime: null,
        endLoginTime: null,
        beginJoinTime: null,
        endJoinTime: null,
        pagesize: 10,
        pageNo: 0,
      },
      grantTime: null,
      closeTime: null,
      // 公司数据
      companyData: [],
      // 部门数据
      deptData: [],
      // 人员数据
      personnelData: [],
      // 人员类型
      personnelTypeData: [],
      //释放类型
      queryPersonnel: [],
      calState: [],
      //发放状态
      releaseStatus: [],
      tableData: [],
      showData: [],
      pagesize: 10,
      total: 10,
      pages: 0,
      parmas: {
        COOKIE_TOKEN: "",
      },
    };
  },
  computed: {
    userInfoExport: function () {
      return checkPermiss(
        "sys:agentAchievement:exportUser",
        this.golbalPermissions
      );
    },
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.exportInUrl = `${this.axios.defaults.baseURL}/business/calculation/exportImport`;
    //获取token
    let token = localStorage.getItem("token");
    this.parmas.COOKIE_TOKEN = token;

    this.companylist();
    this.getcalculation();
    this.personnelType();
    this.getList(this.query);
  },
  watch: {
    total: function () {
      if (
        this.total == (this.query.pageNo - 1) * this.query.pagesize &&
        this.total != 0
      ) {
        this.query.pageNo -= 1;
        this.getList(this.query); //获取列表数据
      }
    },
  },
  methods: {
    //获取表格数据
    getList(obj) {
      getAgentAchievement(obj).then((res) => {
        this.tableData = res.data.records;
        this.query.pagesize = res.data.size;
        this.query.pageNo = res.data.current;
        this.total = res.data.total;
        this.pages = res.data.pages;
      });
    },
    //搜索按钮
    print() {
      if (this.closeTime) {
        this.query.beginLoginTime = this.closeTime[0];
        this.query.endLoginTime = this.closeTime[1];
      }
      if (this.grantTime) {
        this.query.beginJoinTime = this.grantTime[0];
        this.query.endJoinTime = this.grantTime[1];
      }
      if (this.query.beginValidNum < this.query.endValidNum) {
        this.getList(this.query);
      } else {
        this.$message({
          message: "请输入正确的带单量",
          type: "error",
        });
      }
    },
    //查看详情
    look(obj) {
      let that = this;
      let id = obj.id;
      delAgentAchievement(id).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = true;
          this.showData = res.data;
        } else {
          that.$message.error(res.message);
        }
      });
    },
    // 归属公司
    companylist() {
      pagelist().then((res) => {
        this.companyData = res.data;
      });
    },
    // 通过选中公司id查询部门
    companyChange(val) {
      this.query.firmId = val;
      this.query.deptId = null;
      this.queryPersonnel.firmId = val;
      getDepartment(val).then((res) => {
        this.deptData = res.data;
      });
      this.postCompanyEmployList(this.queryPersonnel);
    },
    // 获取部门id
    handleNodeClick(data) {
      this.query.deptId = data.id;
      this.queryPersonnel.deptId = data.id;
      this.postCompanyEmployList(this.queryPersonnel);
    },
    // 获取归属人员数据
    postCompanyEmployList() {
      postCompanyEmployList(this.queryPersonnel).then((res) => {
        this.personnelData = res.data;
      });
    },
    // 人员类型
    personnelType() {
      getEmployee("emp_type").then((res) => {
        this.personnelTypeData = res.data;
      });
    },
    // 归属人员类型翻译
    translaPersonnel(row) {
      return this.selectDictLabel(this.personnelTypeData, row.belongType);
    },
    //获取释放状态
    getcalculation() {
      getEmployee("calculation_state").then((res) => {
        let arr = res.data;
        let arr0 = [{ id: null, itemText: "不限" }];
        arr.map((item) => {
          item.id = parseInt(item.itemValue);
        });
        this.calState = arr0.concat(arr);
      });
    },
    // 状态翻译
    accountTranslation(row) {
      return this.selectDictLabel(this.calState, row.calculationState);
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList(cpage);
    },
    handleSizeChange(psize) {
      this.query.pageNo = psize;
      this.getList(psize);
    },
    // 清空按钮
    emptyFun() {
      this.$refs.query.resetFields();
      this.closeTime = null;
      this.grantTime = null;
      this.query.beginLoginTime = null;
      this.query.beginJoinTime = null;
      this.query.endLoginTime = null;
      this.query.endJoinTime = null;
      this.query.pageNo = 1;
      this.getList(this.query);
    },
    //导出
    exportDept() {
      if (this.closeTime) {
        this.query.beginLoginTime = this.closeTime[0];
        this.query.endLoginTime = this.closeTime[1];
      }
      if (this.grantTime) {
        this.query.beginJoinTime = this.grantTime[0];
        this.query.endJoinTime = this.grantTime[1];
      }
      let fileParmas = this.query;
      delete fileParmas.pageNo;
      delete fileParmas.pagesize;
      expotOut(
        "get",
        "/sys/agentAchievement/exportUser",
        fileParmas, // 导出请求参数
        "全面经纪人业绩" // 导出文件名字
      );
    },
    //点击选择文件触发的事件，触发input的click事件
    exportIn() {
      this.$refs.fileBtn.dispatchEvent(new MouseEvent("click"));
    },
    //上传文件
    showLoading() {
      this.loading(true);
    },
    closeLoading(file) {
      this.loading(false);
      this.$message.success(file.message);
    },
    //遮罩函数
    loading(status) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (!status) {
        loading.close();
      }
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .vue-treeselect
{
    width: 210px;  height: 30px;
}

::v-deep .el-upload-list
{
    display: none;
}
::v-deep .upload-demo
{
    display: inline-block;  margin-left: 10px;
}
.box
{
    p
    {
        margin-top: 10px;  padding: 5px 10px;  text-align: left;  background: rgba(242, 242, 242, 1);
    }
    span
    {
        color: red;
    }
}
.query_wrap ::v-deep.el-form-item,
.query_wrap ::v-deep.el-form-item__label,
.query_wrap ::v-deep.el-form-item__content,
.query_wrap ::v-deep.el-input__inner
{
    line-height: 32px;  height: 32px;
}
.query_wrap ::v-deep.el-date-editor,
.query_wrap ::v-deep.el-input__inner,
.query_wrap ::v-deep.el-form-item__content
{
    width: 210px;
}
.query_wrap ::v-deep.vue-treeselect__control
{
    line-height: 30px;  height: 30px;
}
.query_wrap ::v-deep.vue-treeselect__placeholder
{
    line-height: 30px;
}
.query_wrap ::v-deep.el-form-item,
.query_wrap .ts_wrap,
.query_wrap .ts_wrap .span
{
    float: left;
}
.query_wrap .ts_wrap .span
{
    margin: 0 5px;
}
.query_wrap .ts_wrap
{
    line-height: 32px;
}
.query_wrap ::v-deep.el-form-item
{
    margin-right: unset;  margin-bottom: 15px;
}
.query_wrap ::v-deep.el-input__icon,
.query_wrap ::v-deep .el-range-separator
{
    line-height: 24px;
}
.query_wrap .min ::v-deep.el-input__inner,
.query_wrap .min ::v-deep.el-form-item__content
{
    width: 92px;
}
.query_wrap .el-button
{
    padding: 8px 20px;
}
.main
{
    position: relative;  padding-bottom: 50px;
}
::v-deep .el-pagination
{
    position: absolute;  right: 0;  margin-top: 20px;
}
::v-deep .el-pagination__total
{
    visibility: hidden;
}
.title
{
    font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  top: 20px;  left: 0;  color: rgba(51, 51, 51, 1);
}

</style>
